<template>
    <view class="houseItem bg-fff" @click="toHouseDetail(product)">
        <view class="houseBody flex">
            <view class="imageBox">
            	<image class="image" :lazy-load="true" :src="product.image_list[0].url" mode="aspectFill" />
                <view class="stateFangBTag flex" v-if="product.sell_type_display">
                    <view class="status col-fff font10 fontBold" :class="product.sell_type == 'sale'?'bg-error':'bg-primary'">{{product.sell_type_display}}</view>
                </view>
                
                <view class="previewTotal flex">
                    <u-icon name="eye" color="#ffffff" size="11"></u-icon>
                    <text class="total col-fff font10">{{lookTotal}}</text>
                </view>
                <view class="icons flex">
                    <view class="iconBox flex" v-if="product.fly">
                        <image class="iconItem" src="https://image.srea.org.cn/xcx/icon/icon-product-item-aerial.png" mode="widthFix"></image>
                    </view>
                    <view class="iconBox flex" v-if="product.vr">
                        <image class="iconItem" src="https://image.srea.org.cn/xcx/icon/icon-product-item-vr.png" mode="widthFix"></image>
                    </view>
                    <view class="iconBox flex" v-if="product.video">
                        <image class="iconItem" src="https://image.srea.org.cn/xcx/icon/icon-product-item-video.png" mode="widthFix"></image>
                    </view>
                </view>
            </view>
            <view class="detailBox flex col-3e">
            	<view class="title flex">
            		<view class="housTitle font15 fontBold txtsHidden" :class="product.points>0?'':'calcTit'">
            			{{product.title}}
                        <!-- <text class="fangbianTxt font10 left-5 col-error bg-yellow-opacity txt-middle" v-if="product.fast">方便看房参与楼盘</text> -->
            		</view>
            	</view>
                <view class="priceBox flex">
                    <view class="priceCon flex col-error">
                        <block v-if="product.pan.price.length">
                            <view class="priceType" v-for="priceItem in product.pan.price" :key="priceItem.value">
                                <text class="font10">{{priceItem.label}}</text>
                                <text class="price left-5">{{priceItem.price}} </text>
                                <text class="txt font12">元/㎡</text>
                            </view>
                        </block>
                        <block v-else>
                            <view class="priceType">
                                <text class="txt">价格待定</text>
                            </view>
                        </block>
                    </view>
                </view>
                <view class="addressBox flex font12 col-grey">
                    <text class="itemTxt">{{product.area}}</text>
                    <text class="itemTxt" v-if="product.street_list">{{product.street_list}}</text>
                    <text class="itemTxt" v-if="product.pan.sell_house_type">{{product.pan.sell_house_type}}</text>
                    <text class="itemTxt" v-if="product.pan.size">{{product.pan.size}}</text>
                </view>

                <block v-if="(product.city_index > 0 || product.area_index > 0) && showRanking">
                    <view class="rankingBox flex font8 top-8">
                        <view class="rankingType flex">
                            <text class="medalIcon bg right-6"></text>
                            <text class="fontBold">人气榜</text>
                        </view>
                        <view class="rankingTop">
                            {{product.city_index > 0 ? product.city+'热搜榜TOP'+product.city_index : product.area+'热搜榜TOP'+product.area_index}}
                        </view>
                    </view>
                </block>
                
                <view class="smTextBox flex top-8 font10" v-if="product.pan.kai_time && showTime">
                    <text class="iconKai bg iconBox right-6"></text>
                    开盘时间 | {{ dateStamp(product.pan.kai_time) }}
                </view>
                
                <view class="smTextBox flex top-8 font10">
                    <text class="iconCount bg iconBox right-6" v-if="product.pan.house_count && product.pan.house_count !== '0'"></text>
                    <view class="">
                        <text class="right-6" v-if="product.pan.house_count && product.pan.house_count !== '0'">房源套数:{{product.pan.house_count}}套</text>
                        <text class="right-6" v-if="product.pan.ruwei_ratio">入围比:{{product.pan.ruwei_ratio}}</text>
                        <text class="right-6" v-if="product.pan.points_state && product.pan.points_state !== ''">入围分:{{product.pan.points_state}}</text>
                    </view>
                </view>
            </view>
        </view>
    	<slot></slot>
    </view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
    
	export default {
		props:{
			product: {
				value: Object,
				default: {}
			},
            adviserUId: {
                value: String,
                default: ''
            },
            index: {
                value: Number,
                default: 0
            },
            showTime: {
                value: Boolean,
                default: true
            },
            showRanking: {
                value: Boolean,
                default: true
            },
            keywords: {
                value: String,
                default: ""
            }
		},
        computed:{
            ...mapState(useConfigStore, ['puid']),
            lookTotal: function() {
                let totalStr = String(this.product.view_num).length;
                if(totalStr >= 5){
                	return (this.product.view_num/10000).toFixed(1)+'w'
                }else{
                	return this.product.view_num
                }
            }
        },
		methods:{
			toHouseDetail(item){
                uni.navigateTo({
                    url: `/pages/product/detail/index?productId=${item.id}&puid=${this.adviserUId?this.adviserUId:this.puid}&title=${item.title}&keywords=${this.keywords}`
                })
			},
            dateStamp(data){
                return data.substr(0, 10)
            }
		}
	}
</script>

<style scoped lang="scss">
    .houseItem{
        line-height: 1.4;
    	padding: 20rpx 0rpx;
    	width: 100%;
        .houseBody{
            justify-content: space-between;
            align-items: flex-start;
        }
    	.imageBox{
    		width: 215rpx;
    		height: 170rpx;
    		border-radius: 15rpx;
    		overflow: hidden;
            position: relative;
            .image{
                width: 100%;
                height: 100%;
                border-radius: 15rpx;
            }
            .stateFangBTag{
                position: absolute;
                z-index: 1;
                top: 4rpx;
                left: 8rpx;
                .status{
                    height: 36rpx;
                    line-height: 36rpx;
                    padding: 0 8rpx;
                    border-radius: 4rpx;
                }
            }
            .previewTotal{
                position: absolute;
                z-index: 1;
                left: 15rpx;
                bottom: 15rpx;
                .total{
                    margin-left: 10rpx;
                }
            }
            .icons{
                position: absolute;
                z-index: 1;
                right: 15rpx;
                bottom: 15rpx;
                flex-direction: column;
                .iconBox{
                    margin-top: 10rpx;
                    .iconItem{
                        width: 30rpx;
                    }
                }
            }
    		.prodImage{
    			width: 100%;
    			height: 100%;
    		}
    	}
    	.detailBox{
    		width: calc(100% - 245rpx);
    		justify-content: space-between;
    		flex-direction: column;
    		text-align: left;
            align-items: flex-start;
    		.title{
                width: 100%;
    			line-height: 1.2;
    			justify-content: space-between;
                align-items: flex-start;
    			.housTitle{
    				width: calc(100% - 150rpx);
                    .fangbianTxt{
                        padding: 4rpx 15rpx;
                    }
    			}
                .calcTit{
                    width: 100%;
                }
    		}
    		.priceBox{
                width: 100%;
    			justify-content: space-between;
                .priceCon{
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-end;
                    .priceType{
                        width: 100%;
                        margin-top: 15rpx;
                        .price{
                            font-weight: 600;
                        }
                    }
                }
    		}
    		.addressBox{
                width: 100%;
    			justify-content: flex-start;
                flex-wrap: wrap;
                .itemTxt{
                    margin-top: 15rpx;
                    margin-right: 20rpx;
                }
    		}
            .rankingBox{
                width: 100%;
                position: relative;
                justify-content: flex-start;
                .rankingType{
                    height: 32rpx;
                    padding: 0rpx 20rpx 0rpx 42rpx;
                    background-image: linear-gradient(90deg, rgba(250, 160, 0, 0.1), rgba(250, 160, 0, 0.4));
                    .medalIcon{
                        position: absolute;
                        top: 0;
                        left: 4rpx;
                        display: inline-block;
                        width: 26rpx;
                        height: 26rpx;
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-houses-ranking.png");
                    }
                }
                .rankingTop{
                    padding-left: 20rpx;
                    width: calc(100% - 130rpx);
                    height: 32rpx;
                    line-height: 32rpx;
                    background-image: linear-gradient(90deg, rgba(250, 160, 0, 0.2), rgba(250, 160, 0, 0.03));
                }
            }
            .smTextBox{
                justify-content: flex-start;
                align-items: flex-start;
                line-height: 1.3;
                .iconBox{
                    width: 26rpx;
                    height: 26rpx;
                    display: inline-block;
                }
                .iconKai{
                    background-image: url("https://image.srea.org.cn/xcx/icon/icon-houses-kai.png");
                }
                .iconCount{
                    background-image: url("https://image.srea.org.cn/xcx/icon/icon-houses-count.png");
                }
            }
    	}
    }
</style>